<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[56rpx] font-extrabold mb-[48rpx] text-center text-blue-600 drop-shadow">用户基本信息</text>
    <view class="flex flex-col gap-4 max-w-[700rpx] w-full mx-auto">
      <!-- 服务对象信息 -->
      <view class="bg-white rounded-[24rpx] shadow-lg p-[32rpx] box-border overflow-hidden border border-blue-50 cursor-pointer transition-shadow hover:shadow-[0_8rpx_32rpx_rgba(33,150,243,0.18)] active:shadow-md" @click="goTo('/package-card/info/personal-person-detail/index')">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[56rpx] h-[56rpx] bg-blue-100 rounded-[16rpx] flex items-center justify-center mr-[16rpx]">
            <text class="text-[28rpx]">👤</text>
          </view>
          <view class="flex-1">
            <text class="block text-[32rpx] font-bold text-gray-800 mb-[2rpx]">服务对象信息</text>
            <text class="text-[20rpx] text-gray-400">填写和管理服务对象的基本信息</text>
          </view>
          <text class="text-blue-500 text-[36rpx] font-bold ml-[8rpx]">›</text>
        </view>
      </view>
      <!-- 监护人信息 -->
      <view class="bg-white rounded-[24rpx] shadow-lg p-[32rpx] box-border overflow-hidden border border-green-50 cursor-pointer transition-shadow hover:shadow-[0_8rpx_32rpx_rgba(16,185,129,0.18)] active:shadow-md" @click="goTo('/package-card/info/guardian/index')">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[56rpx] h-[56rpx] bg-green-100 rounded-[16rpx] flex items-center justify-center mr-[16rpx]">
            <text class="text-[28rpx]">👨‍👩‍👧‍👦</text>
          </view>
          <view class="flex-1">
            <text class="block text-[32rpx] font-bold text-gray-800 mb-[2rpx]">监护人信息</text>
            <text class="text-[20rpx] text-gray-400">填写和管理监护人信息</text>
          </view>
          <text class="text-green-500 text-[36rpx] font-bold ml-[8rpx]">›</text>
        </view>
      </view>
      <!-- 下单人信息 -->
      <view class="bg-white rounded-[24rpx] shadow-lg p-[32rpx] box-border overflow-hidden border border-purple-50 cursor-pointer transition-shadow hover:shadow-[0_8rpx_32rpx_rgba(147,51,234,0.18)] active:shadow-md" @click="goTo('下单人信息')">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[56rpx] h-[56rpx] bg-purple-100 rounded-[16rpx] flex items-center justify-center mr-[16rpx]">
            <text class="text-[28rpx]">🛒</text>
          </view>
          <view class="flex-1">
            <text class="block text-[32rpx] font-bold text-gray-800 mb-[2rpx]">下单人信息</text>
            <text class="text-[20rpx] text-gray-400">填写和管理下单人信息</text>
          </view>
          <text class="text-purple-500 text-[36rpx] font-bold ml-[8rpx]">›</text>
        </view>
      </view>
      <!-- 健康管理人信息 -->
      <view class="bg-white rounded-[24rpx] shadow-lg p-[32rpx] box-border overflow-hidden border border-teal-50 cursor-pointer transition-shadow hover:shadow-[0_8rpx_32rpx_rgba(20,184,166,0.18)] active:shadow-md" @click="goTo('/package-card/info/personal-manager/index')">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[56rpx] h-[56rpx] bg-teal-100 rounded-[16rpx] flex items-center justify-center mr-[16rpx]">
            <text class="text-[28rpx]">👨‍⚕️</text>
          </view>
          <view class="flex-1">
            <text class="block text-[32rpx] font-bold text-gray-800 mb-[2rpx]">健康管理人</text>
            <text class="text-[20rpx] text-gray-400">填写和管理健康管理人信息</text>
          </view>
          <text class="text-teal-500 text-[36rpx] font-bold ml-[8rpx]">›</text>
        </view>
      </view>
      <!-- 客户端关联 -->
      <view class="bg-white rounded-[24rpx] shadow-lg p-[32rpx] box-border overflow-hidden border border-orange-50 cursor-pointer transition-shadow hover:shadow-[0_8rpx_32rpx_rgba(249,115,22,0.18)] active:shadow-md" @click="goTo('与客户端-我的关联')">
        <view class="flex items-center mb-[16rpx]">
          <view class="w-[56rpx] h-[56rpx] bg-orange-100 rounded-[16rpx] flex items-center justify-center mr-[16rpx]">
            <text class="text-[28rpx]">🔗</text>
          </view>
          <view class="flex-1">
            <text class="block text-[32rpx] font-bold text-gray-800 mb-[2rpx]">客户端关联</text>
            <text class="text-[20rpx] text-gray-400">管理与客户端的关联信息</text>
          </view>
          <text class="text-orange-500 text-[36rpx] font-bold ml-[8rpx]">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
// import { Button as NutButton } from '@nutui/nutui-taro'

function goTo(url: string) {
  Taro.navigateTo({
    url: url
  })
}
</script>

<!--
性能优化说明：
- 使用max-w-[750rpx]确保页面不超出屏幕宽度
- 卡片使用统一的阴影和边框样式
- 按钮使用主色调渐变，提升视觉层次
- 所有元素都添加box-border确保布局稳定
- 响应式设计适配不同屏幕尺寸
--> 